<!DOCTYPE html>
<html lang="en">

<head>
    {% load static %}
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <title>{% block title %}

    {% endblock %}</title>

    <link rel="stylesheet" href="{% static 'css/public.css' %}">
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">
    <script src="{% static 'layui/layui.js' %}"></script>

    {% block link %}

    {% endblock %}
</head>
<style>
    body {
        background: #f5f5f5 url("{% static 'images/grey.png' %}");
    }

    .language {
        padding: 0;
    }
</style>
{% block style %}

{% endblock %}
<body>

<div class="line-shadow"></div>
<div class="head">
    <div class="header" id="header">
        <div class="header_content">
            <div class="header_logo">
                <a href="/index/default">
                    <img src="{% static 'images/logo.png' %}" alt="">
                </a>
            </div>


            <div id="english" class="header_menu language">
                <a href="javascript:void(0);" class="index" style="margin-left:10px">English</a>
            </div>
            <div id="chinese" class="header_menu language"
                 style=" border-style: solid; border-width: 0 1px 0 0; border-color: #c4c4c4;">
                <a href="javascript:void(0);" class="index" style="margin-right:10px;">中文</a>
            </div>


            <div class="header_menu">
                <a id="common" class="index" href="/common/default">小常识</a>
            </div>
            <div class="header_menu">
                <a id="index" class="index" href="/index/default">首页</a>
            </div>

        </div>
    </div>
</div>

{% block body %}

{% endblock %}

<ul class="layui-fixbar" style="right: 50px; bottom: 50px;">
    <li class="layui-icon layui-fixbar-top" id="to_top" style="background-color: rgb(57, 61, 73);"
        title="返回顶部">
    </li>
</ul>
{% block script %}

{% endblock %}
<script>
    layui.use(['layer', 'jquery', 'form'], function () {
        let $ = layui.jquery;

        if ('{{ request.session.language|safe }}' === 'en_US') {
            $('#index').html('Index')
            $('#common').html('Common Sense')
        }


        $("#chinese").on('click', function () {
            $.get('/chinese', () => {
                window.location.reload()
            })
        })

        $("#english").on('click', function () {
            $.get('/english', () => {
                window.location.reload()
            })
        });


        $("#to_top").click(function () {
            $("html,body").animate({scrollTop: 0}, 200);
        });

        $(document).scroll(function () {
            var scroll_top = $(document).scrollTop();
            //高度多少出现返回顶部，可以随意调整
            if (scroll_top > 600) {
                $("#to_top").show();
            } else {
                $("#to_top").hide();
            }
        });
    })
</script>
</body>
</html>